<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非单文件组件实例</title>
</head>
<body>
<div id="app">
  <h1>第一个vue实例</h1>
  <school></school>
  <hr>
  <student></student>
  <hr>
  <hello></hello>
</div>

<div id="root">
  <h1>第二个vue实例</h1>
  <hello></hello>
</div>

<script src="../../js/vue.js"></script>
<script type="text/javascript">
  //关闭生产环境提示
  Vue.config.productionTip=false

  //创建school组件
  const school=Vue.extend({
    data(){
      return{
        name:"尚硅谷",
        address:"北京昌平"
      }
    },
    template:`
    <div>
      <p>学校名称：{{name}}</p>
      <p>学校地址：{{address}}</p>
      <button @click="showName">提示信息</button>
    </div>
    `,
    methods:{
      //提示信息
      showName(){
        alert(this.name)
      }
    }
  })
  //创建student组件
  const student=Vue.extend({
    data(){
      return{
        name:"张三",
        age:18
      }
    },
    template:`
    <div>
    <h4>学生信息</h4>
    <p>姓名：{{name}}</p>
    <p>年龄：{{age}}</p>
    </div>
    `
  })

  //创建一个hello组件，使用全局注册
  const hello=Vue.extend({
    data(){
      return{
        msg:"欢迎学习vue组件化编程"
      }
    },
    template:`
    <div>
    <h1>{{msg}}</h1>
    </div>
    `
  })

  //全局注册
  Vue.component("hello",hello)

  //创建一个vue实例
  const vm=new Vue({
    el:"#app",
    //局部注册
    components:{
      school,
      student
    }
  })

  //创建第二个vue实例，测试全局注册效果
  const app=new Vue({
    el:"#root"
  })
</script>
</body>
</html>
